[inject ./head.xd]
[link-stylesheet charts.min.css]
[style
  [rule #data;
    [var labels-size; 8rem]
  ]
  [rule #data th;
    [: overflow; hidden]
    [: text-overflow; ellipsis]
    [: white-space; nowrap]
  ]
  [rule #data td;
    [: font-weight; bold]
    [: justify-content; flex-start]
    [: overflow-wrap; normal]
    [: padding-y; .1rem]
  ]
]
{people_names_datalist}
[<form> .list-options; method="GET";
  [<div> .labeled-input;
    [<label> for="x-axis-select"; Osa X]
    [<select> #x-axis-select; name="x-axis";
      [<option> value="author"; {x_author}; Autor]
      [<option> value="month"; {x_month}; Měsíc]
      [<option> value="year"; {x_year}; Rok]
      [<option> value="weekday"; {x_weekday}; Den v týdnu]
      [<option> value="writer"; {x_writer}; Zapisovatel]
    ]
  ]
  [<div> .labeled-input;
    [<label> for="y-axis-select"; Osa Y]
    [<select> #y-axis-select; name="y-axis";
        [<option> value="num-quotes"; Počet hlášek]
    ]
  ]
  [<div> .labeled-input;
    [<label> for="filter-author"; Autor]
    [<input> #filter-author; name="filter-author"; type="text"; value="{filter_author}"; list="people-names"; autocomplete="off"]
  ]
  [<div> .labeled-input;
    [<label> Seřadit podle]
    [<div> .radios;
      [<input> #sorting-x; name="sorting"; type="radio"; value="x"; {sorting_x}]
      [<label> for="sorting-x"; X]
      [<input> #sorting-y; name="sorting"; type="radio"; value="y"; {sorting_y}]
      [<label> for="sorting-y"; Y]
    ]
  ]
  [<button> type="submit"; Zobrazit]
]
[<table> #data; .charts-css; .bar; .show-labels; .labels-align-start;
  {data}
]
